<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>视诀-实时视频美颜SDK|实时视频美颜|实时人脸追踪|实时人脸建模</title>
	<!-- Bootstrap CSS -->
	<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> -->

	<!-- <link rel="stylesheet" type="text/css" href="http://siteimg.oss-cn-qingdao.aliyuncs.com/bootstrap.min.css"> -->
	<link rel="stylesheet" type="text/css" href="http://test.visualogies.com/css/bootstrap.min.css">
	<link href="http://siteimg.oss-cn-qingdao.aliyuncs.com/bootstrap-theme.css" rel="stylesheet">
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
			<![endif]-->
			<style type="text/css">
			.nav > li > a:focus, .nav > li > a:hover {
				text-decoration: none;
				background-color:#fff;
				/*color: #eee;*/
			}
			.nav > li > a{
				border-right-width: 1px;
				border-right-style: solid;
				padding-top: 0;
				padding-bottom:0;
			}
			a{
				color:#333;
			}
			.custom dl{
				float : left;
				/*margin: 0 auto;*/
				margin-right: 100px
			}
			.radiu{
				border: 1px solid #cccccc;
				-webkit-border-radius: 30px;
				-moz-border-radius: 30px;
				border-radius: 30px;
				padding:25px;
			}
			.bj{
				background-image:url("http://siteimg.oss-cn-qingdao.aliyuncs.com/login.jpg");
				height:967px;
				width:100%;
			}
			.tm{
				BACKGROUND-COLOR: transparent;
				BORDER-BOTTOM: #ffffff 1px solid;
				BORDER-LEFT: #ffffff 1px solid;
				BORDER-RIGHT: #ffffff 1px solid;
				BORDER-TOP: #ffffff 1px solid;
				COLOR: #ffffff;
				/*HEIGHT: 18px;*/
				border-color: #ffffff #ffffff #ffffff #ffffff; font-size: 9pt
			}
			img { max-width: 100%;}
			</style>
		</head>
		<body>

			<nav class="navbar  " role="navigation">
				<div class="container">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header" style="margin-top:20px">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span> 

						</button>
						<a class="" href="#" ><img src="http://siteimg.oss-cn-qingdao.aliyuncs.com/logo.png">


						</a>
						<h1 class="pull-right" style="margin-bottom:0;margin-top:40px">视诀</h1>

						<!-- style="float:none;padding-top:0;padding-bottom:0;line-height:0" -->
					</div>


					<!-- Collect the nav links, forms, and other content for toggling -->

					<ul class="nav navbar-nav navbar-right" style="margin-top: 75px;">
						<li class="active"><a href="/">首页</a></li>
						<li><a href="/plan.html">解决方案</a></li>
						<li><a href="/document.html">文档</a></li>
						<li><a href="/down.html">下载</a></li>
						<li><a href="/faq.html">FAQ</a></li>
						<li><a href="/about.html">关于我们</a></li>
						<li><a href="#" style="border-right:0">开发者平台</a></li>
					</ul>

					

				</div>
			</nav>


			<div class="container ">
				<div class="row"> 
					<div class="col-sm-2" style="background-color:#F4F4F4;min-height:500px">
						
						<h5><a href="/doc/0.html">1. 平台介绍</a></h5><h5><a href="/doc/1.html">2. SDK下载</a></h5><h5><a href="/doc/2.html">3. 开发者中心</a></h5><h5><a href="/doc/3.html">4. VisioninSDK集成</a></h5><h5><a href="/doc/4.html">5. 使用VisioninSDK</a></h5><h5><a href="/doc/5.html">6 短视频美颜方案</a></h5><h5><a href="/doc/6.html">7 视频直播美颜方案</a></h5>


					</div>

					<div class="col-sm-10" >
						<h4 class="text-center">7 视频直播美颜方案</h4>
						<p style="text-indent:2em">
<h2>7.1 iOS</h2>
<p>目前支持基于腾讯云直播、乐视云直播、七牛云直播3种美颜方案。</p>
<h2>7.1.1 基于腾讯云直播的美颜方案</h2>
<p>请先前往360云盘下载工程文件：<a href="https://yunpan.cn/cSctATaj3XTCZ">https://yunpan.cn/cSctATaj3XTCZ</a>   提取码：b7ef</p>
<p>下载完成后解压，工程文件位于samples文件夹下的sample1子文件夹。</p>
<h3>A、 集成思路</h3>
<h4>腾讯云直播集成VisioninSDK，主要修改文件有6个：</h4>
<pre><code>AVFrameDispatcher.h
AVFrameDispatcher.m
SettingBeautyView.h
SettingBeautyView.m
SettingBeautyView.xib
MyLiveViewController.mm
</code></pre>
<ul>
<li>在AVFrameDispatcher.h和.m文件中，添加AVVisioninFrameDispatcher类，继承自AVFrameDispatcher</li>
<li>在SettingBeautyView中添加3个slider，用于实时调整磨皮、美白、粉嫩3种美颜效果</li>
<li>在MyLiveViewController.mm中，把原来使用的AVSingleFrameDispatcher替换为AVVisioninFrameDispatcher</li>
</ul>
<h3>B、 集成过程</h3>
<h4>首先将VisioninSDK引入工程当中（相关集成工作请参照VisioninSDK集成）。</h4>
<h4>在AVFrameDispatcher.m中引入VisioninSDK的头文件</h4>
<p><code>#import "Visionin.h"</code></p>
<h4>在AVFrameDispatcher.h文件中添加AVVisioninFrameDispatcher类，继承自AVFrameDispatcher，并在该类中添加3个调整美颜的接口</h4>
<pre><code>/**
 *  将摄像头的帧发到一个渲染器中渲染
 */
@interface AVVisioninFrameDispatcher  : AVFrameDispatcher {

}
@property (retain,nonatomic) AVGLBaseView* imageView;
//添加美颜接口
// 磨皮，范围:0-1.0
- (void)setSmoothLevel:(float)level;
// 美白，范围0-1.0
- (void)setBrightenLevel:(float)level;
// 粉嫩，范围0-1.0
- (void)setToningLevel:(float)level;
@end
</code></pre>
<h4>在AVFrameDispatcher.m文件中设置相关属性</h4>
<pre><code>@interface AVVisioninFrameDispatcher () &lt;VSFaceDelegate, VSBGRAPixelBufferDelegate&gt;
{
    VSVideoFrame *videoFrame;
    BOOL configedOutputSize;
    UIView *videoPreviewView;
    CMSampleTimingInfo sampleTimingInfo;

    BOOL configedImageBuffer;
    BOOL visioninFrameReady;
    CVPixelBufferRef visioninPixelBuffer;
    vImage_Buffer buffer;
    vImage_Buffer bufferY;
    vImage_Buffer bufferCbCr;
    uint8_t *sourceBytes;
    size_t sourceCapacity;
}
@end
</code></pre>
<h4>初始化并遵循相关协议</h4>
<pre><code>[Visionin initialize:@"xxx" appKey:@"yyy"];
        AVCaptureDevicePosition device = [[AVUtil sharedContext].videoCtrl isFrontcamera]
                    ?AVCaptureDevicePositionFront:AVCaptureDevicePositionBack;

        configedOutputSize = NO;
        configedImageBuffer = NO;
        visioninPixelBuffer = NULL;
        sourceCapacity = 0;
        sourceBytes = NULL;
        CGRect frame = [UIScreen mainScreen].bounds;

//        frame = CGRectInset(frame, frame.size.width/4, frame.size.height/4);
        frame = CGRectInset(frame, 1, 1);
        videoPreviewView = [[UIView alloc] initWithFrame:frame];
//        videoPreviewView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
        videoPreviewView.clipsToBounds = YES;
        videoFrame = [[VSVideoFrame alloc] initWithPosition:device asYUV:YES view:videoPreviewView];
        [videoFrame setBgraPixelDelegate:self];

        // 开始人脸追踪
        [videoFrame startVideoFrame];
</code></pre>
<ul>
<li>其中xxx和yyy分别为在开发者平台中注册应用的appId和appKey</li>
</ul>
<h4>覆写AVFrameDispatcher基类方法</h4>
<pre><code>-(void)dispatchVideoFrame:(QAVVideoFrame*)args isSubFrame:(BOOL) isSubFrame format:(ENDataFormat)enDataFormat{*** }
</code></pre>
<ul>
<li>在这个方法里处理从VideoCtrl中传输过来的数据帧aFrame， 封装成CMSampleBufferRef对象交给VSVideoFrame去处理，处理完后会回调</li>
</ul>
<h4>实现videoFrame的协议方法</h4>
<pre><code>- (void)didBGRAPixelBuffer:(CVPixelBufferRef)pixelBuffer{*** }
</code></pre>
<ul>
<li>在这里，把处理完后的效果帧交给腾讯云直播去处理（显示和编码）</li>
</ul>
<h4>实现AVFrameDispatcher.h文件中的3个美颜效果接口</h4>
<pre><code>//实现接口方法
// 磨皮，范围0-1.0
- (void)setSmoothLevel:(float)level{
    [videoFrame setSmoothLevel:level];
}
// 美白，范围0-1.0
- (void)setBrightenLevel:(float)level{
    [videoFrame setBrightenLevel:level];
}
// 粉嫩，范围0-1.0
- (void)setToningLevel:(float)level{
    [videoFrame setToningLevel:level];
}
</code></pre>
<h4>在SettingBeautyView.xib及.m、.h中添加2个UISlider并做相应约束</h4>
<ul>
<li>相当于在原来的一个slider的基础上再创建2个相同的slider，具体工作请参照相应代码</li>
</ul>
<h4>在SettingBeautyView.h文件中修改typedef部分的代码并在SettingBeautyView.m作相应的修改</h4>
<pre><code>//typedef void (^SettingBeautyChanged)(CGFloat beauty);
//typedef void (^SettingBeautyCommit)(CGFloat beauty);
//修改
typedef void (^SettingBeautyChanged)(CGFloat beautySmooth,CGFloat beautyToning,CGFloat beautyBrighten);
typedef void (^SettingBeautyCommit)(CGFloat beautySmooth,CGFloat beautyToning,CGFloat beautyBrighten);
</code></pre>
<h4>在MyLiveViewController.mm中，把原来使用的AVSingleFrameDispatcher替换为AVVisioninFrameDispatcher</h4>
<pre><code>// AVSingleFrameDispatcher *_frameDispatcher;
AVVisioninFrameDispatcher *_frameDispatcher;
</code></pre>
<h4>初始化_frameDispatcher</h4>
<pre><code>//_frameDispatcher=[[AVSingleFrameDispatcher alloc] init];
//_frameDispatcher.imageView = _imageView;
_frameDispatcher=[[AVVisioninFrameDispatcher alloc] init];
_frameDispatcher.imageView = _imageView;
</code></pre>
<h4>在-(void)onLiveBeauty:(LivingView *)livingView方法中作如下修改：</h4>
<pre><code>//修改
beautyView.commitCompletion = ^ (CGFloat smoothLevel,CGFloat toningLevel,CGFloat brightenLevel) {
    //[ws changeBeauty:beauty];

    [_frameDispatcher setSmoothLevel:smoothLevel];
    [_frameDispatcher setToningLevel:toningLevel];
    [_frameDispatcher setBrightenLevel:brightenLevel];
};

beautyView.changeCompletion = ^ (CGFloat smoothLevel,CGFloat toningLevel,CGFloat brightenLevel) {
    //[ws changeBeauty:beauty];

    [_frameDispatcher setSmoothLevel:smoothLevel];
    [_frameDispatcher setToningLevel:toningLevel];
    [_frameDispatcher setBrightenLevel:brightenLevel];
};
</code></pre>
<h4>修改完成，运行程序。</h4>
<h2>7.1.2 基于乐视云直播的美颜方案</h2>
<p>请先前往360云盘下载工程文件：<a href="https://yunpan.cn/cSctMAkE9LmPF">https://yunpan.cn/cSctMAkE9LmPF</a>    提取码：a307  </p>
<h3>A、集成思路</h3>
<h4>乐视云直播集成VisioninSDK，主要在VisioninSDK文件夹下添加3个文件：</h4>
<pre><code>VideoCaptureHelper.h
VideoCaptureHelper.m
VideoCaptureHelperInternal.h
</code></pre>
<ul>
<li>在VideoCaptureHelper.h和.m文件中，添加VideoCaptureHelper类，提供对外的接口。</li>
<li>在VideoCaptureHelperInternal.h，添加了一个内部使用的类，处理从摄像头传输过来的数据。</li>
</ul>
<h4>由于乐视云将摄像头封装成SDK，接口未对外开放，无法直接获取摄像头数据后再做处理。故利用objc-runtime的hook机制，hook住AVCaptureVideoDataOutput的下列方法</h4>
<pre><code>- (void)setSampleBufferDelegate:(id&lt;AVCaptureVideoDataOutputSampleBufferDelegate&gt;)sampleBufferDelegate queue:
            (dispatch_queue_t)sampleBufferCallbackQueue;
</code></pre>
<ul>
<li>在调用此方法时，把sampleBufferDelegate替换为我们定制的AVCaptureVideoDataOutputSampleBufferDelegate (AVCaptureVideoDataOutputPrivate), 这样我们可以在AVCaptureVideoDataOutputPrivate里获取到摄像头传输过来的采样数据，将采样的数据转交给VisioninSDK处理，待VisioninSDK处理的完毕后，再转交给原来的sampleBufferDelegate处理。最终完成视频的处理流程。</li>
</ul>
<h3>B、集成过程</h3>
<h4>将VisioninSDK-streaming-ios-sdk-20160504-v1.0.4/Libs/VisioninSDK目录下的文件全部添加到工程即可（相关集成工作请参照VisioninSDK集成），默认已开启VisioninSDK的美颜效果。</h4>
<ul>
<li>如果不想使用VisioninSDK， 调用VideoCaptureHelper类的disableVisioninVideoCaptur</li>
</ul>
<h4>在VideoCaptureHelper.h和.m文件中，添加VideoCaptureHelper类，提供对外的接口。</h4>
<pre><code>// 使用VisioninSDK提供的磨皮、美白、粉嫩效果，以及人脸识别等效果
// 默认已打开
+ (void)enableVisioninVideoCapture;
// 关闭VisioninSDK效果
+ (void)disableVisioninVideoCapture;

// 磨皮，范围:0-1.0
+ (void)setSmoothLevel:(float)level;
// 美白，范围0-1.0
+ (void)setBrightenLevel:(float)level;
// 粉嫩，范围0-1.0
+ (void)setToningLevel:(float)level;
</code></pre>
<h4>直播过程中要调整3个美颜参数的效果，为了减小对乐视云直播demo的修改，在AppDelegate.m做了些修改，添加了三个UISlider，通过这三个UISlider可以调整相关的磨皮、美白、粉嫩参数。具体代码请参考AppDelegate.m</h4>
<h4>修改完成，运行程序。</h4>
<h2>7.1.3 基于七牛云直播的美颜方案</h2>
<p>请先前往360云盘下载工程文件：<a href="https://yunpan.cn/cSMLPtapnw83e">https://yunpan.cn/cSMLPtapnw83e</a>    提取码：04bd。</p>
<ul>
<li>请确保本地已安装cocoapods环境。</li>
</ul>
<h3>A、集成思路</h3>
<h4>七牛云直播集成VisioninSDK，主要新添加2个文件，并使用VisioninSDK中的VSVideoCamera作为摄像头采集，并将返回的CVPixelBufferRef交给七牛云直播SDK编码并推流。</h4>
<pre><code>VisioninViewController.h
VisioninViewController.m
#pragma mark - &lt;VSBGRAPixelBufferDelegate&gt;
-(void)didBGRAPixelBuffer:(CVPixelBufferRef)pixelBuffer{
    CVPixelBufferLockBaseAddress(pixelBuffer, 0);
    [self.session pushPixelBuffer:pixelBuffer completion:^(BOOL success) {

    }];
    CVPixelBufferUnlockBaseAddress(pixelBuffer, 0);
}
</code></pre>
<ul>
<li>由于VisioninSDK内部对GPUImage做了集成修改，而七牛云直播的原有工程已经集成了GPUImage，导致库无法兼容，因此从原有工程中删除了GPUImage，新增以上两个文件作为示例。</li>
</ul>
<h4>添加UISlider用于调节磨皮、美白、粉嫩程度。</h4>
<h3>B、集成过程</h3>
<h4>新建VisioninViewController类，继承自UIViewController。</h4>
<pre><code>@interface VisioninViewController : UIViewController
</code></pre>
<h4>在VisioninViewController.m文件中引入VisioninSDK和七牛云直播的头文件。</h4>
<pre><code>#import "VisioninViewController.h"
#import "VisioninSDK/Visionin.h"
#import &lt;PLStreamingKit/PLStreamingKit.h&gt;
</code></pre>
<h4>初始化VSVideoCamera并遵循相关协议</h4>
<pre><code>[Visionin initialize:@"xxx" appKey:@"yyy"]; 
VSVideoCamera *videoCamera = [[VSVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset640x480
 position:AVCaptureDevicePositionFront view:self.view];
//只需要添加需要的输出数据对应的delegate就可以了
[videoCamera setBgraPixelDelegate:self];
[videoCamera startCameraCapture];
self.videoCamera = videoCamera;
</code></pre>
<h4>对视频编码和推流进行相关配置</h4>
<pre><code>PLVideoStreamingConfiguration *videoConfiguration = [PLVideoStreamingConfiguration configurationWithVideoSize:CGSizeMake(480, 640) videoQuality:kPLVideoStreamingQualityMedium1];
#warning 你需要设定 streamJSON 为自己服务端创建的流
//    NSDictionary *streamJSON;
// 播放地址
NSURL *url = [[NSBundle mainBundle] URLForResource:@"initjson" withExtension:@"txt"];
NSData *data = [NSData dataWithContentsOfURL:url];
NSDictionary *streamJSON = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];

PLStream *stream = [PLStream streamWithJSON:streamJSON];

self.session = [[PLStreamingSession alloc] initWithVideoConfiguration:videoConfiguration audioConfiguration:nil stream:stream];
self.session.delegate = self;
</code></pre>
<h4>在VSVideoCamera的VSBGRAPixelBufferDelegate代理方法里面发送视频CVPixelBufferRef数据。</h4>
<pre><code>#pragma mark - &lt;VSBGRAPixelBufferDelegate&gt;
-(void)didBGRAPixelBuffer:(CVPixelBufferRef)pixelBuffer{
    CVPixelBufferLockBaseAddress(pixelBuffer, 0);
    [self.session pushPixelBuffer:pixelBuffer completion:^(BOOL success) {

    }];
    CVPixelBufferUnlockBaseAddress(pixelBuffer, 0);
}
</code></pre>
<h4>添加UISlider，UIButton等控件，具体过程请参照相关代码。</h4>
<h4>修改完成，运行程序。</h4>
<h2>7.2 Android</h2>
<p><em>敬请期待</em>              </p></p>
					</div>
				</div>
			</div>




			<footer class="custom container" style="margin: 0 auto">

				<img src="http://siteimg.oss-cn-qingdao.aliyuncs.com/weixin.png" class="pull-right">

				<dl>
					<dt><h4>联系我们</h3></dt>	
					<dd><a href="">技术支持</a></dd>
					<dd><a href="">业务咨询</a></dd>
					<dd><a href="">市场合作</a></dd>
					<dd><a href="">企业邮箱</a></dd>
				</dl>

				<dl >
					<dt><h4>开发者服务</h3></dt>	
					<dd><a href="">sdk下载</a></dd>
					<dd><a href="">文档中心</a></dd>
					<dd><a href="">开发者中心</a></dd>
				</dl>


				<dl >
					<dt><h4>关于我们</h3></dt>	
					<dd><a href="">公司介绍</a></dd>
					<dd><a href="">联系方式</a></dd>
					<dd><a href="">加入我们</a></dd>
					<dd><a href="">合作伙伴</a></dd>
					<dd><a href="">友情链接</a></dd>
				</dl>


				

			</footer>



















			<!-- jQuery -->
			<script src="http://siteimg.oss-cn-qingdao.aliyuncs.com/jquery.js"></script>
			<!-- Bootstrap JavaScript -->
			<script src="http://siteimg.oss-cn-qingdao.aliyuncs.com/bootstrap.min.js"></script>

			<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
			<script src="Hello World"></script>
		</body>
		</html>
